<template>
  <div>
    <div class="page-title" style="width:100%">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click="$router.go(-2)">接收任务列表</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a @click="$router.go(-1)">执行任务</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>驻地检查</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <el-row>
        <el-form label-width="80px" :inline="true" :model="formData">
          <el-row>
            <el-col :span="4">
              <el-form-item label="检查人">
                <el-input v-model="formData.execStaffName" readonly style="width:150px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="检查日期">
                <el-date-picker
                  v-model="formData.checkDate"
                  style="width:150px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item label="检查类别">
                <el-input v-model="formData.checkType" readonly style="width:150px"></el-input>
              </el-form-item>
            </el-col>-->
            <el-col :span="4">
              <el-form-item label="受检单位">
                <el-cascader
                  placeholder="请选择受检单位"
                  style="width:150px"
                  v-model="checkCompanyList"
                  :options="checkCompanyNameOptions"
                  clearable
                  filterable
                  ref="refHandle1"
                  :props="{ expandTrigger: 'hover', checkStrictly: true , value:'nodeCode', label:'label', children:'children'}"
                  :show-all-levels="true"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="受检班组">
                <el-input v-model="formData.taskItem" readonly style="width:150px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="检查地点">
                <el-input v-model="formData.address" style="width:150px" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
              <el-col :span="4">
              <el-form-item label="检查类型">
                <el-select style="width:200px" 
                v-model="formData.type"
                placeholder="选择类型" 
                clearable>
                <el-option 
                v-for="item in types" 
                :key="item.id" 
                :label="item.name" 
                :value="item.name"
                ></el-option>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align:center">
              <el-button
                type="primary"
                size="small"
                style="margin-right:10px"
                @click="addCheckTimes()"
              >确认提交</el-button>
              <el-button type="danger" size="small" @click="cancel">取消返回</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row style="padding-top:5px; border-top: 2px dashed #dddddd;text-align:center">
        <el-col :span="16">
          <el-tabs tab-position="left" @tab-click="handleClickTab" v-loading="tableLoading">
            <el-tab-pane
              v-for="item in checkItemOptions"
              :key="item.checkListItemName"
              :label="item.checkListItemName"
            >
              <el-table :data="item.childNodes" border max-height="500px">
                <el-table-column prop="checkListItemName" label="检查项" align="center"></el-table-column>
                <el-table-column label="现场执行" align="center" width="120px">
                  <template slot-scope="scope">
                    <!-- isProblem===false  ---  是现场执行
                    isProblem===true  ---  不是现场执行-->
                    <el-switch
                      v-model="scope.row.isProblem"
                      active-color="#ff4949"
                      inactive-color="#13ce66"
                      active-text="否"
                      inactive-text="是"
                    ></el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="addProblem(scope.row,'addProblem')"
                      :disabled="!scope.row.isProblem"
                    >录入</el-button>
                    <el-button type="primary" size="mini" @click="getProblemList(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="8" style="padding-left:5px; text-align:center">
          <el-table :data="problemData" border max-height="400px">
            <el-table-column prop="checkRecordNo" label="问题记录编号" align="center" sortable></el-table-column>
            <el-table-column label="操作" align="center" width="200px">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editProblem(scope.row,'editProblem')"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteProblem(scope.row.checkRecordID)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <service-dialog
      :show.sync="showDialog"
      :add-data="dataToDialog"
      @cancelDialog="cancelDialog"
      @submitDialog="submitDialog"
    ></service-dialog>
  </div>
</template>

<script>
import { GetCompany } from '../../../services/gettreedata.js'
import { GetDictionary } from "../../../services/cq_gettreedata.js"
import {
  GetCheckTable,
  GetProblems,
  DeleteProblem,
  AddCheckTimes
} from '../../../services/personCenterTask.js'
import serviceDialog from './serviceDialog'

export default {
  components: {
    serviceDialog
  },
  data() {
    return {
      showDialog: false,
      formData: {},
      checkCompanyList: [],
      checkCompanyNameOptions: [],
      checkItemOptions: [],
      tableLoading: false,
      dataToDialog: {},
      problemData: [],
      filterData: [],
      types: []
    }
  },
  watch: {
    // 监听 checkCompanyList 的改变，点击某一项即可选中
    checkCompanyList() {
      if (this.$refs.refHandle1) {
        this.$refs.refHandle1.dropDownVisible = false
      }
    }
  },
  created() {
    this.formData = this.$route.params
    this.handleGetCompany()
    this.handleGetChecklist()
    this.getProblemType()
    // 判断任务列表，若有公司，则默认选中，如无，则自选。
    if (
      this.formData.taskList != '作业队' &&
      this.formData.taskList != '配属班组' &&
      this.formData.taskList != '重点要害部位及固定场所'
    ) {
      delete this.formData.companyCode
    } else {
      this.checkCompanyList = this.dealCompanyCode(this.formData.companyCode)
    }
  },
  methods: {
    // ----------------初始化获取数据---------------------
    // 1. 获取公司
    handleGetCompany() {
      GetCompany()
        .then(res => {
          this.checkCompanyNameOptions = res.data
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    // 2. 获取检查表
    handleGetChecklist() {
      this.tableLoading = true
      GetCheckTable('004801')
        .then(res => {
          this.formData.checkItem = res.data.items[0].checkListItemName
          this.checkItemOptions = res.data.items
          this.tableLoading = false
        })
        .catch(err => {
          this.$message.error(err.message)
          this.tableLoading = false
        })
    },

    // ------------点击事件函数------------------
    // 1. 确认提交 - 将所有暂存问题都存入数据库，暂存 -> 录入
    addCheckTimes() {
      this.$confirm('此操作将提交整个检查, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let addTimes = {
            supervisionTaskCode: this.formData.supervisionTaskCode,
            taskItem: this.formData.taskItem,
            supervisionTaskDetail2ID: this.formData.supervisionTaskDetail2ID
          }
          console.log(addTimes)
          AddCheckTimes(addTimes)
            .then(res => {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.$router.go(-1)
              
            })
            .catch(e => {
              this.$message.error(e.message)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
    },
    // 2. 取消返回
    cancel() {
      this.$router.go(-1)
    },
    // 3. 点击切换 tabs
    handleClickTab(tab) {
      this.formData.checkItem = tab.label
    },
    // 4. 录入 - 弹出录入组件
    addProblem(row, method) {
      this.dataToDialog = this.formData
      this.dataToDialog.checkType = this.formData.type
      this.dataToDialog.checkCompanyList = this.checkCompanyList
      this.dataToDialog.method = method
      this.dataToDialog.immediately = '否'
      this.dataToDialog.education = '否'
      this.getDialogVdateReffect()
      Object.assign(this.dataToDialog, row)
      this.showDialog = true
      console.log(this.dataToDialog)
    },
    // 5. 查看 - 查看该检查项下暂存问题
    getProblemList(row) {
      const { checkListID, checkListItemCode } = row
      const {
        supervisionTaskCode,
        supervisionTaskDetail2ID,
        taskItem,
        // checkType,
        checkStaffID
      } = this.formData
      this.filterData = {
        checkListID,
        checkListItemCode,
        supervisionTaskCode,
        supervisionTaskDetail2ID,
        taskItem,
        // checkType,
        checkStaffID,
        recordStatus: '暂存'
      }
      console.log(JSON.stringify(this.filterData))
      GetProblems(this.filterData)
        .then(res => {
          console.log(res)
          if (res.data.list.length === 0) {
            this.$message('此检查项下无暂存问题！')
          }
          this.problemData = res.data.list
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    // 6. 编辑 - 修改已录入的暂存问题
    editProblem(row, method) {
      this.dataToDialog = row
      this.dataToDialog.method = method
      this.dataToDialog.checkCompanyList = new Object(
        this.dealCompanyCode(row.companyCode)
      )
      if (this.dataToDialog.immediately == '否') this.getDialogVdateReffect()
      this.showDialog = true
      console.log(this.dataToDialog)
    },
    // 7. 删除 - 删除已录入的暂存问题
    deleteProblem(id) {
      this.$confirm('此操作将删除此暂存问题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          DeleteProblem(id)
            .then(res => {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.getProblemList(this.filterData)
            })
            .catch(e => {
              this.$message.error(e.message)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 8. 取消弹框
    cancelDialog(val) {
      this.dataToDialog = {}
      this.showDialog = val
    },
    // 9. 确认录入问题
    submitDialog(val) {
      this.dataToDialog = {}
      this.showDialog = val
    },

    // -------------数据处理函数-----------------
    // 1. 将公司默认选中
    dealCompanyCode(companyCode) {
      let checkCompanyList = []
      let i = 0
      while (i < companyCode.length) {
        checkCompanyList.push(companyCode.slice(0, i + 2))
        i = i + 2
      }
      return checkCompanyList
    },
    // 默认验证时间和验证结果
    getDialogVdateReffect() {
      let date = new Date()
      let month =
        date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() <= 9 ? '0' + date.getDate() : date.getDate()
      this.dataToDialog.verifyDate =
        date.getFullYear() + '-' + month + '-' + day
      this.dataToDialog.rectEffect = '合格'
    },
    getProblemType() {
      GetDictionary({name:'检查类型'}).then((res) => {
        this.types = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>
<style>
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>